


<template>
  <md-editor v-model="text" @onChange="onChange" @onUploadImg="onUploadImg" />
</template>


<script>
import { defineComponent } from "vue";
// import MdEditor from "md-editor-v3";
// import "md-editor-v3/lib/style.css";
// import screenfull from 'screenfull';
// import cropper from 'cropper';
// import highlight from 'highlight';

//https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.1/katex.min.js

// MdEditor.config({
//   editorExtensions: {
//     screenfull: {
//       instance: screenfull
//     },
//     // cropper: {
//     //   instance: cropper
//     // },
//     // highlight: {
//     //   instance: highlight
//     // },
//   }
// });

// import { ref } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

import screenfull from 'screenfull';
import katex from 'katex';
import 'katex/dist/katex.css';

import cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

import highlight from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';

import mermaid from 'mermaid';

MdEditor.config({
  editorExtensions: {
    // Download iconfont to project public folder.
    iconfont: '/lib/iconfont.js',
    screenfull: {
      instance: screenfull
    },
    katex: {
      instance: katex
    },
    cropper: {
      instance: cropper
    },
    highlight: {
      instance: highlight
    },
    mermaid: {
      instance: mermaid
    }
  }
});

// const text = ref('hello!');


export default defineComponent({
  name: "App",
  components: {
    MdEditor,
  },
  data() {
    return {
      text: "# 这是标题",
    };
  },
  methods: {
    // onChange(val) {},
    onUploadImg(files) {
      console.log(Array.from(files));
    },
  },
});
</script>